<template>
	<div class="tx-self">
		<h6><i></i>请选择本地照片，上传编辑自己的头像</h6>
		<div class="tx-select">
			<label for="addFile">
				<span>+选择图片</span>
			</label>
			<input type="file" name="file" class="upload__input" @change="uploadChange($event)" 
				accept="image/png,image/gif,image/jpeg,image/bmp,image/jpg" id="addFile" 
				ref="addRef" style="display: none;">
			<p>支持JPG、JPEG、GIF、PNG、BMP格式的图片.</p>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	export default {
		methods: {
			uploadChange (e) {
			},
		}
	}
</script>

<style scoped>
.tx-self {
	margin: 0 78px;
}
.tx-self h6 {
	font-size: 12px;
	font-weight: 400;
	color: #31475E;
	letter-spacing: 0.5px;
}
.tx-self h6 i {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	margin-right: 5px;
	background: #FFBB41;
	transform: translateY(-3px);
}
.tx-select {
	margin-top: 20px;
	width: 350px;
	height: 378px;
	background: #F2F6FA;
	border-radius: 2px;
	overflow: hidden;
}
.tx-select span {
	display: block;
	margin: 144px auto 8px;
	width: 100px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	text-decoration: none;
	background: #FFFFFF;
	border-radius: 2px;
	font-size: 12px;
	color: #186175;
}
.tx-select span:hover {
	cursor: pointer;
}
.tx-select p {
	font-size: 12px;
	color: #6A7C92;
	opacity: 0.7;
	text-align: center;
}
</style>